import React, { Component } from 'react';

/*
参数:
count int 总页数
cur   int 当前页

onChange fn(page) 返回下一个页码
*/

class Page extends Component {
  prev () {
    if (this.props.cur - 1 > 0) {
      this.props.onChange(this.props.cur - 1);
    }
  }
  next () {
    if (this.props.cur + 1 <= this.props.count) {
      this.props.onChange(this.props.cur + 1);
    }
  }
  fnClick (page) {
    this.props.onChange(page);
  }
  render() {
    if (!this.props.count) console.error('Page need count');
    if (!this.props.cur) console.error('Page need current page');
    return (
      <nav>
        <ul className="pagination">
          <li onClick={this.prev.bind(this)}>
            <a href="javascript:;">
              <span>&laquo;</span>
            </a>
          </li>
          {
            Array.from(new Array(this.props.count)).map((item, index) => (
              <li key={index} className={this.props.cur === index + 1 ? 'active' : ''} onClick={this.fnClick.bind(this, index + 1)}><a href="javascript:;">{index + 1}</a></li>
            ))
          }
          <li onClick={this.next.bind(this)}>
            <a href="javascript:;">
              <span>&raquo;</span>
            </a>
          </li>
        </ul>
      </nav>
    );
  }

}

export default Page;
